<div class="slideleft" id="slideEventLeft" data-toggle="tooltip" title="Reculer" ng-hide="loadingEvents"><img src="./../Views/Resources/Pictures/slider-arrow-left.png" alt="<"/></div>
<div class="slider" id="sliderEvent">
	<img ng-show="loadingEvents" style="width:25px;height:25px" alt="Chargement" src="Resources/Pictures/ajax-loader.gif" />
	<div ng-hide="loadingEvents" class="holder">
		<div ng-repeat="event in onlineEvents">
			<div id="event{{ event.DALObject.Id }}" class="slide {{ event.Color }}">
				<div class="main_container_item_header">
					<span class="glyphicon glyphicon-list" ng-show="event.hasArticle" ng-click="openDetailsCommand(event);" data-toggle="tooltip" title="Afficher les détails"></span>
					<span class="glyphicon glyphicon-edit" ng-click="subscribeCommand(event);" data-toggle="tooltip" title="S'inscrire"></span>
				</div>
				<p>{{ event.DALObject.Title }}</p>
				<p>{{ event.DALObject.Description }}</p>
				
				<img ng-show="event.hasPoster" ng-src="data:{{ event.DALObject.PictureMime }};base64,{{ event.DALObject.Picture }}" width="100%" />
			</div>
		</div>
	</div>
</div>
<div class="slideright" id="slideEventRigth" data-toggle="tooltip" title="Avancer" ng-hide="loadingEvents"><img src="./../Views/Resources/Pictures/slider-arrow-right.png" alt=">"/></div>

<script type="text/javascript">

	var isSliding = false;
	var step = 250;
	
	$("#slideEventLeft").click(function () { 
		if(isSliding == false)
		{
			isSliding = true;
			var actualPosition = $("#sliderEvent").scrollLeft();

			$( "#sliderEvent" ).animate(
			{
				scrollLeft: actualPosition - step
			}, 
			{
				duration: 800,
				complete: function() 
				{
					isSliding = false;
				}
			});
		}
	});
	
	$("#slideEventRigth").click(function () { 
		if(isSliding == false)
		{
			isSliding = true;
			var actualPosition = $("#sliderEvent").scrollLeft();
			
			$( "#sliderEvent" ).animate(
			{
				scrollLeft: actualPosition + step
			}, 
			{
				duration: 800,
				complete: function() 
				{
					isSliding = false;
				}
			});
		}
	});
</script>